<template>
	<default-header-page-layout ref="page" title="分拣单详情">
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<scan-input-form-item placeholder="" disabled :hasScan="false" :hasSearch="false" class="forma-item"
					label="单据编号" :value="orderInfo.no" />

				<view v-if="true">
					<view v-for="(item,index) in sortingList" :key="index">
						<bar-content :OrderStatus="orderInfo.OrderStatus" :index="index" :content="item"></bar-content>
					</view>
				</view>
			</view>
		</view>
	</default-header-page-layout>
</template>

<script>
	import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
	import ActionUserRow from '@/components/ActionUserRow.vue'
	import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
	import barContent from './modules/barContent.vue'
	let initInterVal = null;
	import {SortPdaDetailPage} from '@/api/slicingOn.js'
	export default {
		name: 'emptyInPage',
		components: {
			DefaultHeaderPageLayout,
			ActionUserRow,
			ScanInputFormItem,
			barContent
		},
		data() {
			return {
				pageBodyHeight: 0,
				orderInfo:{},
				sortingList:[]
			}
		},
		computed: {

		},
		watch: {
			'orderInfo.no':{
				handler(val){
					if(val) {
						console.log(val,'val');
						this.getSortingList(val)
					}
				}
			}
		},
		methods: {
			// 获取分拣单明细
			async getSortingList(no){
				try{
					let {data}=await SortPdaDetailPage({no})
					console.log(data.rows,'sort');
					this.sortingList=data.rows
				}catch(e){
					//TODO handle the exception
					console.log(e);
				}
			},
			/* 页面初始化获取页面body高度的定时器 */
			startInitInterval(callback) {
				initInterVal = setInterval(() => {
					if (this.pageBodyHeight) {
						this.clearInitInterval()
						callback && callback()
					} else {
						this.pageBodyHeight = this.$refs.page.getBodyHeight()
					}
				}, 200)
			},
			/* 清除定时器 */
			clearInitInterval() {
				try {
					clearInterval(initInterVal)
					initInterVal = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		onReady() {
			this.startInitInterval(() => {
				/* 页面初始化后需要执行的代码在这边调用 */
			})
		},
		onUnload() {
			this.clearInitInterval()
		},
		onLoad(item){
			this.orderInfo=item
			console.log(item,'onLoad');
		}
	}
</script>

<style scoped lang="scss">
	.forma-item {
		margin-bottom: 24rpx;
	}

	.only-watch-container {
		background-color: #D0DDD8;
		min-height: 90rpx;
		display: flex;

		&>.label {
			color: $u-tips-color;
			font-size: 32rpx;
			flex-shrink: 0;
			padding-left: 20rpx;
			padding-top: 22rpx;
		}

		&>.content {
			width: 1px;
			flex-grow: 1;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 8rpx 0;
		}
	}

	.bottom-btns-row {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;

		.btn-frame {
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}
	}

	.scan-input-form-item-compontent {
		width: 100%;
		margin-top: 50rpx;

		.p-form-label {
			font-size: 32rpx;
			color: $u-tips-color;
			padding-bottom: 12rpx;
			padding-left: 20rpx;
		}

		.input-view {
			padding-left: 20rpx;
			width: 94%;
		}

	}

	::v-deep .u-search__content {
		padding: 0 !important;
	}
</style>